<template>
    <div class="home-rank">

        <div class="navigationBar">
            <div v-for="(item, index) in navigationBar" :key="index" :id="item.id"
                style="display:flex;flex-direction: column;">
                <a :class="[isSelectd == item.id ? 'isSelectdFont' : 'noSelectdFont']" :href="'#' + item.id + '-point'">
                    {{ item.bar }}
                </a>
                <div :class="[isSelectd == item.id ? 'isSelectd' : '']"></div>
            </div>
        </div>

        <van-index-bar :index-list="indexList" @change="change" class="wapper">

            <div class="recommend list">
                <van-index-anchor>推荐榜单</van-index-anchor>
                <div class="list-rank" style="width: 90%;">
                    <div class="list-rank-img" v-for="(item, index) in recommendList" :key="index"
                        @click="sendListId(item.id)">
                        <van-image :src="item.coverImgUrl" radius="0.5rem" />
                        <span style="position: relative; bottom:2.5rem;font-size: 0.7rem;color: lightgray;">
                            {{ item.updateFrequency }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="official list" v-if="officialList">
                <span class="anchor" id="official-point"></span> <!-- 偏移锚点 -->
                <div style="display: flex;align-items: center;margin-left: 1rem;">
                    <van-image :src="couldLogo" radius="0.5rem" style="width: 1rem;height:1rem" />
                    <van-index-anchor index="1" style="position: relative;right: 0.7rem;">
                        官方榜
                    </van-index-anchor>
                </div>
                <div v-for="(item, index) in officialList" :key="index" class="official_rank"
                    @click="sendListId(item.id)">
                    <div class="tabs">
                        <span>{{ item.name }}</span>
                        <a>{{ item.updateFrequency }}</a>
                    </div>
                    <div class="content">
                        <div class="image" v-if="!imgData[index]">
                            <van-loading type="spinner" color="black" style="top: 1rem;" />
                        </div>
                        <div class="image" v-if="imgData[index]">
                            <van-image :src="imgData[index][0].al.picUrl" radius="0.5rem" />
                            <van-image :src="imgData[index][1].al.picUrl" radius="0.4rem" />
                            <van-image :src="imgData[index][2].al.picUrl" radius="0.3rem" />
                        </div>
                        <div class="songs">
                            <div v-for="(info, index) in item.tracks" :key="index" class="song">
                                <div class="info">
                                    <span>{{ index + 1 }}</span>
                                    <span>{{ info.first }}</span>
                                </div>
                                <div class="info-singer">
                                    <a>-</a>
                                    <!-- <a v-for="(singer, index) in item.ar" :key="index">
                                        {{ singer.name }}
                                        <span v-show="index != item.ar.length - 1">/</span>
                                    </a> -->
                                    <a>{{ info.second }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="selected list">
                <span class="anchor" id="selected-point"></span> <!-- 偏移锚点 -->
                <van-index-anchor index="2">精选榜</van-index-anchor>
                <div class="list-rank">
                    <div class="list-rank-img" v-for="(item, index) in selectedList" :key="index"
                        @click="sendListId(item.id)">
                        <van-image :src="item.coverImgUrl" radius="0.5rem" />
                        <span style="position: relative; bottom:2.2rem;font-size: 0.7rem;color: lightgray;">
                            {{ item.updateFrequency }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="genre list">
                <span class="anchor" id="genre-point"></span> <!-- 偏移锚点 -->
                <van-index-anchor index="3">曲风榜</van-index-anchor>
                <div class="list-rank">
                    <div class="list-rank-img" v-for="(item, index) in genreList" :key="index"
                        @click="sendListId(item.id)">
                        <van-image :src="item.coverImgUrl" radius="0.5rem" />
                        <span style="position: relative; bottom:2.5rem;font-size: 0.7rem;color: lightgray;">
                            {{ item.updateFrequency }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="global list">
                <span class="anchor" id="global-point"></span> <!-- 偏移锚点 -->
                <van-index-anchor index="4">全球榜</van-index-anchor>
                <div class="list-rank">
                    <div class="list-rank-img" v-for="(item, index) in gloablList" :key="index"
                        @click="sendListId(item.id)">
                        <van-image :src="item.coverImgUrl" radius="0.5rem" />
                        <span style="position: relative; bottom:1.5rem;font-size: 0.7rem;color: lightgray;">
                            {{ item.updateFrequency }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="languages list">
                <span class="anchor" id="languages-point"></span> <!-- 偏移锚点 -->
                <van-index-anchor index="5">语种榜</van-index-anchor>
                <div class="list-rank">
                    <div class="list-rank-img" v-for="(item, index) in languagesList" :key="index"
                        @click="sendListId(item.id)">
                        <van-image :src="item.coverImgUrl" radius="0.5rem" />
                        <span style="position: relative; bottom:2.5rem;font-size: 0.7rem;color: lightgray;">
                            {{ item.updateFrequency }}
                        </span>
                    </div>
                </div>
            </div>
        </van-index-bar>
    </div>
</template>

<script >
import Vue from 'vue';
import { IndexBar, IndexAnchor, Cell } from 'vant';
import { Loading } from 'vant';
Vue.use(Loading);
Vue.use(IndexBar)
Vue.use(Cell)
Vue.use(IndexAnchor)
export default {
    data() {
        return {
            couldLogo: 'http://p1.music.126.net/fL9ORyu0e777lppGU3D89A==/109951167206009876.jpg', //logo
            navigationBar: [
                {
                    id: "official",
                    bar: "官方",
                },
                {
                    id: "selected",
                    bar: "精选"
                },
                {
                    id: "genre",
                    bar: "曲风"
                },
                {
                    id: "global",
                    bar: "全球"
                },
                {
                    id: "languages",
                    bar: "语种"
                },
            ],
            officialImgId: [
                {
                    id: "19723756"
                },
                {
                    id: "3779629"
                },
                {
                    id: "2884035"
                },
                {
                    id: "3778678"
                },

            ],
            indexList: [], //导航栏索引
            listAll: [],  //所有榜单
            officialList: [], //官方榜
            imgData: [], //官方榜单封面图片
            recommendList: [],//推荐榜单
            selectedList: [],//精选榜单
            genreList: [], //曲风榜单
            gloablList: [],//全球榜单
            languagesList: [], //语种榜单
            isSelectd: ""
        }
    },
    created() {
        window.that = this,
            this.initIndexList(),
            this.getListAll(),
            // this.getImg1(), this.getImg2(), this.getImg3(), this.getImg4()
            this.getImg()

    },
    methods: {
        /*         getImg1() {
                    let group = []
                    this.$request('get', '/playlist/detail?id=' + this.officialImgId[0].id + '').then(res => {
                        group = res.playlist.tracks.slice(0, 3)
                        this.imgData.push(group)
                    });
                },
                getImg2() {
                    let group = []
                    this.$request('get', '/playlist/detail?id=' + this.officialImgId[1].id + '').then(res => {
                        group = res.playlist.tracks.slice(0, 3)
                        this.imgData.push(group)
                    });
                },
                getImg3() {
                    let group = []
                    this.$request('get', '/playlist/detail?id=' + this.officialImgId[2].id + '').then(res => {
                        group = res.playlist.tracks.slice(0, 3)
                        this.imgData.push(group)
                    });
                },
                getImg4() {
                    let group = []
                    this.$request('get', '/playlist/detail?id=' + this.officialImgId[3].id + '').then(res => {
                        group = res.playlist.tracks.slice(0, 3)
                        this.imgData.push(group)
                    });
                }, */
        getImg() {
            //获取榜单图片
            let group = []
            for (let i = 0; i < 4; i++) {
                // console.log(this.officialList[i].id);
                this.$request('get', '/playlist/detail?id=' + this.officialImgId[i].id + '').then(res => {
                    group = res.playlist.tracks.slice(0, 3)
                    this.imgData.push(group)
                });
            }
        },
        getListAll() {
            this.$request('get', '/toplist/detail').then(res => {
                console.log(res)
                // this.listAll = res.list
                // this.officialList = res.list.slice(0, 4)
                this.$set(this, 'listAll', res.list)

                //官方榜
                this.$set(this, 'officialList', res.list.slice(0, 4))
                // console.log("official", this.officialList);

                let tmpList = []

                //推荐榜
                tmpList.push(res.list[28])
                tmpList.push(res.list[7])
                tmpList.push(res.list[38])
                this.recommendList = tmpList
                // console.log(this.recommendList);


                tmpList = []
                //精选榜
                tmpList.push(res.list[4])
                tmpList.push(res.list[5])
                tmpList.push(res.list[35])
                tmpList.push(res.list[28])
                tmpList.push(res.list[29])
                tmpList.push(res.list[38])
                this.selectedList = tmpList
                // console.log(this.selectedList);


                //曲风榜
                tmpList = res.list.slice(6, 9)
                tmpList.push(res.list[10])
                tmpList.push(res.list[24])
                tmpList.push(res.list[27])
                tmpList.push(res.list[32])
                this.genreList = tmpList
                // console.log(this.genreList);

                //全球榜
                tmpList = res.list.slice(11, 14)
                tmpList.push(res.list[15])
                tmpList.push(res.list[18])
                tmpList.push(res.list[33])
                this.gloablList = tmpList
                // console.log(this.gloablList);

                // 语种榜
                tmpList = res.list.slice(16, 18)
                tmpList.push(res.list[23])
                tmpList.push(res.list[9])
                tmpList.push(res.list[30])
                tmpList.push(res.list[31])
                tmpList.push(res.list[34])
                this.languagesList = tmpList
                // console.log(this.languagesList);

            });
        },

        sendListId(id) {
            console.log(id)
            this.$router.push(`/songlist/${id}`);
        },

        //导航栏感应
        change(index) {
            // console.log(index)
            // document.getElementById("index").className = "isSelectd"
            this.isSelectd = index
            // console.log(this.isSelectd);
        },


        //导航栏数据
        initIndexList() {
            for (let i = 0; i < this.navigationBar.length; i++) {
                this.indexList.push(this.navigationBar[i].id)
            }
        },
    }

}
</script>

<!-- 官方榜 -->
<style scoped>
.navigationBar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: rgb(240, 243, 245);
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0.8rem;
}

.isSelectd {
    background-color: red;
    position: relative;
    bottom: 0.4rem;
    border-radius: 2px;
    border: 2.6px solid red;
    z-index: -1;
}

.isSelectdFont {
    color: black;
    font-weight: bold;
}

.noSelectdFont {
    color: gray;
}

.anchor {
    position: relative;
    bottom: 3rem;
}

.official_rank {
    margin: 0px 1rem;
    width: 90%;
    height: 7rem;
    border: 1px solid lightgray;
    background-color: rgb(249, 249, 251);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.tabs {
    margin: 0.3rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tabs>span {
    font-size: 1.2rem;
    font-weight: bold;
}

.tabs>a {
    color: rgba(26, 26, 26, .5);
    font-size: 0.6rem;
}

.image {
    white-space: nowrap;
    overflow: hidden;
    width: 30%;
    z-index: 0;
}

.image>div:nth-child(1) {
    width: 4rem;
    height: 4rem;
}

.image>div:nth-child(2) {
    filter: opacity(60%);
    width: 3rem;
    height: 3rem;
    position: relative;
    right: 2.5rem;
    z-index: -1;
}

.image>div:nth-child(3) {
    filter: opacity(30%);
    width: 2rem;
    height: 2rem;
    position: relative;
    right: 4.1rem;
    z-index: -2;
}

.content {
    display: flex;
    margin-left: 1rem;

}

.songs {
    width: 80%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    overflow: hidden;
    /* justify-content: center; */
}

.song {
    width: 80%;
    /* margin: 0.1rem 0; */
    margin-bottom: 0.2rem;
    display: flex;
    overflow: hidden;

}

.info {
    white-space: nowrap;
}

.info>* {
    /* display: flex; */
    margin: 0.3rem;
}

.info>span {
    font-weight: bold;
    font-size: 0.9rem;
}

.info-singer {
    white-space: nowrap;
}


.info-singer>a {
    font-size: 0.9rem;
    margin-right: 0.2rem;
}
</style>

<!-- 其他榜 -->
<style scoped>
.list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0.8rem 0;
}

.list-rank {
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 1rem; */
    margin-left: 1rem;
    margin-right: 1.5rem;
    justify-content: space-between;

}

.list-rank-img {
    height: 6.5rem;
    width: 6.5rem;
    margin: 0.5rem 0;
}

.languages {
    height: 35rem;
}
</style>


<style>
.home-rank {
    background-color: rgb(240, 243, 245);
}

.van-index-bar__sidebar {
    display: none;
}

.van-index-anchor--sticky {
    display: none;
}
</style>